<template>
  <div class="task">
    <div class="task_btn">
      <!-- <el-button @click="new_task">添加任务</el-button> -->
      <div class="search">
        <input type="text" value="智能搜索" disabled="true" style="border: none; width: 80px" />
        <input type="text" v-model="search" placeholder="输入搜索关键词" @keyup.enter="onSearch" style="width: 230px; margin-bottom: 20px" />
        <el-select v-model="searchd.classd" filterable placeholder="请选择类别" @change="nowList" class="searchclass" style="width: 130px">
          <el-option v-for="(item, index) in classd" :key="index" :label="item.class_name" :value="item.class_id"> </el-option>
        </el-select>
        <el-select
          v-model="searchd.listsea"
          filterable
          placeholder="请选择清单事项名称"
          class="searchclass"
          style="width: 200px"
          @change="listseaNow"
        >
          <el-option v-for="(item, index) in listsea" :key="index" :label="item.name" :value="item.id"> </el-option>
        </el-select>
        <el-select v-model="searchd.deped" placeholder="请选择所属区域" class="searchclass" style="width: 130px" @change="depedNow">
          <el-option v-for="(item, index) in dep" :key="index" :label="item.dept_name" :value="item.dept_id"> </el-option>
        </el-select>
        <el-select v-model="searchd.team" placeholder="请选择部门" class="searchclass team" style="width: 130px" @change="teamNow">
          <el-option v-for="(item, index) in team" :key="index" :label="item.realname" :value="item.userid"> </el-option>
        </el-select>
        <button @click="onSearch">搜索</button>
      </div>
    </div>
    <el-table :data="tableData" border class="task_table" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column fixed type="selection" width="55"> </el-table-column>
      <el-table-column prop="add_time" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time | formatDated }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="explain" label="具体情形">
        <template slot-scope="scope">
          <span class="ncontent">{{ scope.row.explain }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="清单事项名称">
        <template slot-scope="scope">
          <span @click="openDesc(scope.row)" class="ncontent">{{ scope.row.ncontent }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="add_username" label="发布人"> </el-table-column>
      <el-table-column prop="named" label="类别"> </el-table-column>
      <!-- <el-table-column
            prop="name"
            label="计划日期"
            width="300">
                <template slot-scope="scope">
                <span>{{scope.row.stime | formatDated}} 至 {{scope.row.etime | formatDated}}</span>
                </template>
            </el-table-column> -->
      <el-table-column prop="einheit" label="协同治理单位">
        <template slot-scope="scope">
          <!-- <span v-for="(item,index) in scope.row.einheit" :key="index"> </span> -->
          <el-tag size="mini" v-for="(item, index) in scope.row.einheit" :key="index">{{ item }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="状态" width="">
        <template slot-scope="scope">
          <span>{{ scope.row.state | stated }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button style="margin-right: 10px" @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <!-- 此编辑删除 是针对所有用户 发布中未处理的项目进行操作 -->
          <div style="display: inline-block" v-if="noLook">
            <el-button type="text" size="small" style="color: #31bdce" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" style="color: #f56c6c" @click="deleted(scope.row)">删除</el-button>
          </div>
          <!-- 此删除为超级管理员权限，针对所有项目，且不与上面的编辑删除起到冲突 -->
          <div style="display: inline-block" v-if="!noLook">
            <el-button type="text" size="small" style="color: #f56c6c" @click="deleted(scope.row)" v-if="adminShow">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, prev, pager, next"
      style="text-align: right; margin-top: 15px"
      :total="totals"
    >
    </el-pagination>

    <!-- 查看详情 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :before-close="drawerClose" class="drawer" :with-header="false">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" id="subOutputRank-print">
        <h3 style="padding: 10px 0; font-size: 20px">领导批示：</h3>
        <h3 style="text-align: center; margin: 240px 0 30px; font-size: 24px">天长市权责清单协同治理事项处理标签</h3>
        <el-form-item label="创建时间:" prop="date">
          <p>{{ details.add_time | formatDated }}</p>
        </el-form-item>
        <el-form-item label="具体情形:" prop="company">
          <p>{{ details.explain }}</p>
        </el-form-item>
        <el-form-item label="类别:" prop="named" style="display: block; width: 800px">
          <p style="display: inline-block; width: 750px; word-wrap: break-word">{{ details.named }}</p>
        </el-form-item>
        <el-form-item label="清单事项名称:" prop="type">
          <p>{{ details.type }}</p>
        </el-form-item>
        <el-form-item label="发布人:" prop="type">
          <p>{{ details.add_username }}</p>
        </el-form-item>
        <el-form-item label="任务评价:" prop="date" v-if="details.state == 2" class="rate">
          <el-rate v-model="details.appraise" class="score" disabled :texts="textScro" show-text text-color="#ff9900"> </el-rate>
        </el-form-item>

        <!-- <el-form-item label="计划日期:" prop="date">
                <p>{{details.stime | formatDated}} 至 {{details.etime | formatDated}}</p>
            </el-form-item> -->
        <el-form-item label="协同治理单位:" prop="einheit">
          <el-tag v-for="(item, index) in details.einheits" :key="index">{{ item }}</el-tag>
        </el-form-item>
        <el-form-item label="联系电话:" prop="phone">
          <p>{{ details.phone }}</p>
        </el-form-item>
        <el-form-item label="处理说明:" prop="company" style="color: red" v-if="bohui != ''">
          <p v-for="(item, index) in bohui" :key="index">{{ item.p_content }}</p>
        </el-form-item>

        <!-- <el-form-item label="任务追加说明:" prop="company">
                <p v-for="(item,index) in detailed" :key="index">{{item}}</p>
            </el-form-item> -->
        <el-form-item label="上传图片:" class="uppic">
          <el-upload action="#" list-type="picture-card" :file-list="fileList" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :modal-append-to-body="false">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="上传附件:" class="uppic" v-if="filesAppen.length > 0">
          <ul class="appen_list">
            <li v-for="(item, index) in filesAppen" :key="index">
              <a :href="item.src" :download="item.src">{{ item.name }}</a>
            </li>
          </ul>
        </el-form-item>
        <el-form-item label="上传视频:" class="uppic">
          <div class="wrap">
            <video :src="videoDate" controls="controls"></video>
          </div>
        </el-form-item>
        <div class="messages" v-if="logsd != ''">
          <h3>任务追加说明</h3>
          <div class="mess_cn" v-for="(item, index) in logsd" :key="index" :style="item.type == '102' ? 'text-align: right;' : 'text-align: left;'">
            <div :class="item.type == '102' ? 'messag mess_right' : 'messag'">
              <div class="mess_left">
                <img :src="item.icon == '' ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : item.icon" alt="" />
                <p>{{ item.add_realname }}</p>
              </div>
              <div class="user_cn">
                <span><span style="display: inline-block"></span>{{ item.p_content }}</span>
                <img :src="item.pic" alt="" width="150" style="display: block; margin: 10px 0" />
                <span style="display: block; font-size: 13px; color: #333">{{ item.add_time | formatDated }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="wan" v-if="details.state == 3 || details.state == 2">
          <p>协同处理任务完成，谢谢。</p>
          <!-- 此处的打印，只针对已完成的任务 -->
          <!-- <el-button @click="printContent(e)" style="float:right;">打印</el-button> -->
        </div>
        <!-- 此处包含处理中 都有打印功能了，如果后期不想处理中有，则删除此处，把上面的注释部分去掉即可 -->
        <div style="overflow: auto">
          <el-button @click="printContent(e)" style="float: right">打印</el-button>
        </div>
      </el-form>

      <!--  被退回的项目 进行转发功能 -->
      <div v-if="details.state == -1" style="margin: 10px 50px 100px">
        <div style="margin-bottom: 10px; font-size: 14px">重新转发该任务:</div>
        <el-select v-model="companys" multiple filterable placeholder="请选择呼叫单位" style="width: 260px; margin-right: 10px">
          <el-option v-for="item in options" :key="item.value" :label="item.realname" :value="item.userid"> </el-option>
        </el-select>
        <el-button type="primary" @click="anewTransmit">转发</el-button>
      </div>
      <!-- 表单提交 -->
      <el-form :model="form" status-icon :rules="rule" ref="form" label-width="100px" class="demo-form" v-if="noSubmit && member != '0'">
        <el-form-item label="内容:" prop="reason" class="edit_container">
          <el-input type="textarea" v-model="form.reason"></el-input>
          <el-upload
            ref="pictureUpload"
            action="/api/project/upload"
            list-type="picture-card"
            :show-file-list="false"
            class="avatar-uploader"
            :on-success="handlePreview"
            style="display: inline-block; margin-left: 30px; vertical-align: middle"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :limit="1"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">任务说明</el-button>
          <el-button type="success" @click="complete('form')" v-if="details.state != 3">任务完成</el-button>
          <el-button type="success" @click="score = true" v-else>评价任务</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 评价 -->
    <el-dialog title="评分" :visible.sync="score" :close-on-click-modal="false" :showClose="false" class="score_bg" width="30%">
      <p style="margin-bottom: 15px">请给此次任务评分 评分等级为（满意、基本满意、不满意）</p>
      <el-rate class="score" v-model="scoreVal" @change="nowscore" :texts="textScro" show-text> </el-rate>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="scoreClick">提交</el-button>
      </span>
    </el-dialog>

    <!-- 清单提示 -->
    <el-dialog title="清单事项介绍" :visible.sync="centerDialogVisible" width="30%" center>
      <span>{{ ncontent }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  userInfo,
  publishListOf,
  taskDelete,
  userUnit,
  anewTransmit,
  uploadRemove,
  taskDetails,
  deptlist,
  survey,
  appraise,
  logsList,
  projectAdd,
  projectstatus,
  itemNameList,
  projectmain,
  userdepe,
  apiassociat,
} from '@/utils/index.js'
export default {
  props: ['ctype'],
  inject: ['reload'],
  data() {
    var reason = (rule, value, callback) => {
      if (value === '') {
        this.$message.closeAll()
        this.$message.warning('请填写表单')
        callback(new Error(' '))
      } else {
        callback()
      }
    }
    return {
      // adminShow 用于 是否是超级管理员登录，如果是，则打开部分超级管理员权限
      adminShow: false,
      noLook: false,
      noSubmit: true,
      dep: [],
      searchBtn: '',
      centerDialogVisible: false,
      search: '',
      tableData: [],
      currentPage1: 1,
      drawer: false,
      score: false,
      scoreVal: null,
      imageUrl: '',
      bohui: [],
      textScro: ['不满意', '基本满意', '满意', '极差', '失望'],
      // 详情
      ruleForm: {
        username: '',
        type: '',
        date: '',
        company: '',
      },
      rules: {},
      form: {
        radio: '3',
        reason: '',
      },
      rule: {
        reason: [{ validator: reason, trigger: 'blur' }],
      },
      optionsd: [],
      // 呼叫单位
      options: [],
      // 选中的单位id
      companys: '',
      // 此任务的id
      opid: '',

      dialogVisible: false,
      dialogImageUrl: '',
      fileList: [],
      videoDate: [],
      // 任务id
      rowId: '',

      // 分页
      totals: 0,
      details: [],
      lookId: '',
      logsd: [],
      ncontent: '',
      detailed: [],
      listsea: [],
      classd: [],
      file: [],
      filesAppen: [],
      team: [],
      searchd: {
        listsea: '',
        classd: '',
        deped: '',
        team: '',
      },
      myConfig: {
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: '',
      },
      editorOption: {},
      member: '',
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    },
  },
  watch: {},
  created() {
    deptlist().then((res) => {
      this.dep = res.data
      this.dep.unshift({ dept_name: '所有所属区' })
      console.log(res.data)
    })
    if (this.ctype == 'To_audit') {
      this.noLook = true
    }
    publishListOf({
      ctype: this.ctype,
    }).then((res) => {
      this.tableData = res.data.data
      this.totals = res.data.total
      this.$emit('child-total', { num: res.data.total, ctype: this.ctype })
    })
    // 清单事项
    itemNameList().then((res) => {
      this.listsea = res.data.data
      this.listsea.unshift({ name: '所有清单事项' })
    })
    // 事项类别
    projectmain().then((res) => {
      this.classd = res.data
      this.classd.unshift({ class_name: '所有类别' })
    })
    // 获取单位
    userdepe().then((res) => {
      this.team = res.data
      this.team.unshift({ realname: '所有部门' })
    })
    userUnit().then((res) => {
      console.log(res)
      this.options = res.data
    })
    userInfo().then((res) => {
      console.log(res)
      if (res.data.userid == 10000) {
        this.adminShow = true
      }
    })
  },
  methods: {
    // 对驳回的任务重新转发分配
    anewTransmit() {
      console.log(this.details.id)
      console.log(this.companys)
      anewTransmit({
        id: this.details.id,
        worker: this.companys,
      }).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.reload()
          }, 800)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 上传图片
    handlePreview(file) {
      this.file.push(file.data)
      this.imageUrl = file.data.src
      this.$message.closeAll()
      this.$message.success('上传成功')
    },
    // 移除图片
    handleRemove(file) {
      uploadRemove({
        id: file.response.data.id,
      }).then((res) => {
        if (res.code == '0') {
          // 移除file中数据
          // 1.从pics数组中，找到图片对应的索引值
          let j = this.file.findIndex((x) => x.id == file.response.data.id)
          // 2.调用splice方法，移除图片信息
          this.file.splice(j, 1)
          // 删除预览图片
          let uploadFiles = this.$refs.pictureUpload.uploadFiles
          for (var i = 0; i < uploadFiles.length; i++) {
            if (uploadFiles[i]['url'] == file.url) {
              uploadFiles.splice(i, 1)
            }
          }
          this.$message.closeAll()
          this.$message.success(res.msg)
        } else {
          this.$message.closeAll()
          this.$message.warning(res.msg)
        }
      })
    },
    beforeUpload(file) {
      console.log(file)
    },
    nowList(val) {
      if (!val) return
      this.searchd.listsea = ''
      apiassociat({
        class_id: this.searchd.classd,
      }).then((res) => {
        this.listsea = res.data
        this.listsea.unshift({ name: '所有清单事项' })
      })
    },
    teamNow(val) {
      if (!val) return
    },
    listseaNow(val) {
      if (!val) return
    },
    // 市镇联动
    depedNow(val) {
      if (!val) return
      if (val == '1') {
        userdepe({
          type: '101',
        }).then((res) => {
          this.team = res.data
          this.team.unshift({ realname: '所有部门' })
        })
      } else if (val == '2') {
        userdepe({
          type: '201',
        }).then((res) => {
          this.team = res.data
          this.team.unshift({ realname: '所有部门' })
        })
      } else if (val == '3') {
        userdepe({
          type: '301',
        }).then((res) => {
          this.team = res.data
          this.team.unshift({ realname: '所有部门' })
        })
      }
    },
    printContent() {
      let subOutputRankPrint = document.getElementById('subOutputRank-print')
      let newContent = subOutputRankPrint.innerHTML
      let oldContent = document.body.innerHTML
      document.body.innerHTML = newContent
      window.print()
      window.location.reload()
      document.body.innerHTML = oldContent
      return false
    },
    // 清单内容
    openDesc(id) {
      this.ncontent = id.contents
      this.centerDialogVisible = true
    },
    drawerClose() {
      this.drawer = false
      this.fileList = []
    },

    // 评分
    nowscore() {
      console.log(this.scoreVal)
    },
    handleClose() {},
    scoreClick() {
      console.log(this.scoreVal)
      if (this.scoreVal == 0) {
        this.$message.warning('请给此次任务评分')
        return false
      }
      const loading = this.$loading({
        lock: true,
        background: 'rgba(255, 255, 255, 0.3)',
      })
      appraise({
        id: this.lookId,
        appraise: this.scoreVal,
      }).then((res) => {
        loading.close()
        if (res.code == '0') {
          this.$message.success('评价完成')
          survey({
            id: this.lookId,
            state: '2',
            content: this.form.reason,
          }).then((res) => {
            // console.log(res)
            if (res.code == '0') {
              this.$message.closeAll()
              this.$message.success('协同此理任务完成，谢谢。')
            } else {
              this.$message.closeAll()
              this.$message.warning(res.msg)
            }
          })
          setTimeout(() => {
            this.score = false
            this.reload()
          }, 800)
        } else {
          this.$message.closeAll()
          this.$message.warning(res.msg)
        }
      })
    },
    // 搜索
    onSearch() {
      publishListOf({
        form: this.search,
        genre: this.searchd.listsea == '所有清单事项' ? '' : this.searchd.listsea,
        name: this.searchd.classd == '所有类别' ? '' : this.searchd.classd,
        departments: this.searchd.deped == '所有区域' ? '' : this.searchd.deped,
        cate_id: this.searchd.team == '所有部门' ? '' : this.searchd.team,
      }).then((res) => {
        this.tableData = res.data.data
      })
    },
    // 添加任务
    new_task() {
      this.$router.push('/add_task')
    },
    // 表格操作
    handleClick(row) {
      this.lookId = row.id
      this.drawer = true
      this.details = []
      this.fileList = []
      // 对话框
      logsList({
        p_id: row.id,
        type: '101',
      }).then((res) => {
        this.logsd = res.data.data
      })
      projectstatus({
        id: row.id,
      }).then((res) => {
        res.data.forEach((item) => {
          this.detailed.push(item.explain)
        })
      })
      // this.dialogImageUrl = 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg'
      logsList({
        p_id: row.id,
        type: '201',
      }).then((res) => {
        this.bohui = res.data.data
      })
      taskDetails({
        id: row.id,
      }).then((res) => {
        this.details = res.data
        // this.fileList = res.data[0].pic
        let lists = res.data.pic
        this.member = res.data.member
        lists.forEach((item) => {
          this.fileList.push({ url: item.src })
        })
        if (res.data.video.length > 0) {
          this.videoDate = res.data.video[0].src
        }
        if (res.data.files.length > 0) {
          this.filesAppen = res.data.files
        }
        if (res.data.state == '2' || res.data.state == '-1') {
          this.noSubmit = false
        } else {
          this.noSubmit = true
        }
      })
    },
    edit(row) {
      // console.log(row);
      this.rowId = row.id
      // localStorage.clear();
      // window.localStorage.setItem('rowid',row.id)
      this.$router.push({ path: '/edit_task', query: { rowId: row.id } })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 重新提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          projectAdd({
            p_id: this.lookId,
            p_content: this.form.reason,
            pic: this.imageUrl,
            type: '102',
          }).then((res) => {
            // console.log(res)
            if (res.code == '0') {
              this.$message.closeAll()
              this.$message.success('提交完成')
              // 对话框
              logsList({
                p_id: this.lookId,
                type: '101',
              }).then((res) => {
                this.logsd = res.data.data
              })
            } else {
              this.$message.closeAll()
              this.$message.warning(res.msg)
            }
          })
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    },
    // 任务完成
    complete() {
        // formName
      this.drawer = false
      this.score = true
      return
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.$confirm('协同此理任务完成，谢谢。', '提示', {
    //         confirmButtonText: '评价',
    //         cancelButtonText: '取消',
    //         type: 'success',
    //       })
    //         .then(() => {
    //           this.drawer = false
    //           this.score = true
    //         })
    //         .catch(() => {})
    //       // setTimeout(()=>{
    //       //     this.drawer = false
    //       //     this.score = true
    //       // },800)
    //     } else {
    //       // console.log('error submit!!');
    //       return false
    //     }
    //   })
    },
    // 删除
    deleted(val) {
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          taskDelete({
            id: val.id,
          }).then((res) => {
            if (res.code == '0') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              publishListOf({
                ctype: this.ctype,
              }).then((res) => {
                this.tableData = res.data.data
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      publishListOf({
        ctype: this.ctype,
        page: val,
      }).then((res) => {
        this.tableData = res.data.data
      })
    },
    // 上传视频
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.task_btn {
  padding: 0 15px;
}
.el-table--enable-row-transition .el-table__body td::v-deep {
  border: 2px solid #ebeef5 !important;
}
.task_btn button {
  background-color: #31bdce;
  color: white;
}
.search {
  float: right;
  font-size: 0;
  // border: 1px solid #ccc;
}
.search input {
  height: 36px;
  vertical-align: top;
  border: 0;
  outline: none;
  padding: 0 7px;
  font-size: 14px;
  border: 1px solid #ccc;
}
.search button {
  height: 36px;
  border: 0;
  padding: 0 20px;
}
.search button:hover {
  cursor: pointer;
}
.task_table::v-deep {
  margin-top: 30px;
  box-sizing: border-box;
  .el-table_1_column_1 {
    .cell {
      text-align: center;
    }
  }
}

.el-pagination {
  font-weight: 500;
}
.drawer::v-deep {
  .el-drawer {
    width: 50% !important;
  }
}
.demo-ruleForm::v-deep {
  margin-top: 15px;
  background-color: white;
  padding: 40px 30px 20px 30px;
  border-bottom: 1px solid #ccc;
  .el-rate {
    vertical-align: middle;
    margin-top: 10px;
  }
  .el-form-item {
    display: inline-block;
    width: 500px;
    margin-bottom: 30px;
    vertical-align: middle;
  }
  .el-form-item__label {
    width: 130px !important;
  }
  .el-form-item__content {
    margin-left: 130px !important;
  }
  .uppic {
    display: block;
    width: 100%;
    .el-upload-list__item {
      div {
        height: 146px;
      }
    }
  }
  .el-select {
    width: 100%;
  }
  .el-upload {
    display: none;
  }
}
.wrap {
  width: 70%;
  position: relative;
  // padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
  height: 400px;
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.demo-form::v-deep {
  width: 90%;
  padding-top: 20px;
  .el-textarea__inner {
    height: 100px;
  }
}
.searchclass::v-deep {
  width: 100px;
  height: 38px;
  margin: 0 7px;
  .el-input {
    height: 38px;
  }
  .el-input__inner {
    height: 38px;
    line-height: 38px;
  }
}
.score::v-deep {
  // text-align: center;
  .el-rate__item:nth-child(5) {
    display: none;
  }
  .el-rate__item:nth-child(4) {
    display: none;
  }
}

.el-dialog__wrapper {
  right: 200px;
  left: 100px;
  top: 100px;
}
.ncontent {
  width: 225px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ncontent:hover {
  cursor: pointer;
}
.messages {
  padding: 0 100px;
  h3 {
    text-align: center;
  }
}
.mess_cn {
  margin-top: 20px;
  overflow: auto;
  .mess_left {
    float: left;
    width: 60px;
    text-align: center;
    vertical-align: middle;
    img {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }
    p {
      font-size: 12px;
    }
  }
  .user_cn {
    font-size: 12px;
    float: left;
    border: 1px solid #478bf1;
    border-radius: 10px;
    padding: 10px 20px;
    vertical-align: middle;
    margin-right: 10px;
    box-shadow: 0px 0px 5px #ccc;
    margin-left: 20px;
    span:nth-child(1) {
      font-size: 14px;
      padding-bottom: 10px;
    }
    span {
      display: block;
      font-size: 13px;
    }
  }
  .mess_right {
    float: right;
    .mess_left {
      float: right;
    }
    .user_cn {
      margin-right: 20px;
    }
  }
}
.message {
  padding: 10px 20px;
  padding-bottom: 60px;
  h3 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.van-image {
  z-index: 9999;
}
.el-select-dropdown__item {
  width: 250px !important;
}
.edit_container::v-deep {
  .ql-editor {
    height: 200px !important;
  }
}
.edit_container::v-deep {
  .el-textarea {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    height: 148px;
    .el-textarea__inner {
      height: 100%;
    }
  }
}
.avatar-uploader {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.demo-form::v-deep {
  width: 90%;
  padding-top: 20px;
  .el-textarea__inner {
    height: 100px;
  }
}
.wan {
  text-align: center;
  font-size: 16px;
  color: red;
  overflow: hidden;
}
.appen_list {
  li {
    line-height: 1.6;
    padding: 10px 0;
    list-style: none;
    a {
      text-underline: inherit;
      color: #409eff;
    }
  }
}
</style>